<template>
  <header>
    <nav>
      <div class="left">
          <i class="iconfont icon-sun"></i>
          <p @click="clickRouter">新中地天气</p>
          <div class="local">
            <div class="localcity">{{ localcity }}</div>
            <div class="localtemp">{{ temperature }}度</div>
          </div>
      </div>
      <div class="right">
        <i class="iconfont icon-info" @click="handleClick"></i>
        <i v-if="isShowPlus" class="iconfont icon-jiahao" @click="handleAdd"></i>
      </div>
    </nav>
  </header>
</template>

<script setup>
import { ref,computed,onMounted } from 'vue'
import { getCitysByip,getWeatherByadcodeb } from '../api'
import { useCounterStore } from '@/stores/counter.js'
import { storeToRefs } from 'pinia'
import { useRouter,useRoute } from 'vue-router'

const { isShowjia } = storeToRefs(useCounterStore())
const { addDatas } = useCounterStore()

const router = useRouter()
const route = useRoute()

const localcity = ref('')//本地城市
const temperature = ref('')//本地温度

// 获取当前路由,根据当前路由判断是否显示+
const isShowPlus = computed(() => route.path !== '/' && isShowjia.value);

// 添加事件
const handleAdd = ()=>{
    // 把数据放入总数组(showCitys)
    addDatas()
}

// 点击打开about
const emit = defineEmits(['open'])
const handleClick = ()=>{
    emit('open')
}

// 点击新中地天气跳转首页
const clickRouter = ()=>{
    router.push('/')
}

// 通过ip地址查询所在城市
const getCitys = async()=>{
    // 通过ip地址查询所在城市
    const res = await getCitysByip()
    const city = res.city
    const adcode = res.adcode
    // 通过adcode查询天气
    const mes = await getWeatherByadcodeb(adcode)
    const temp = mes.lives[0].temperature
    // 赋值本地城市和温度
    localcity.value = city
    temperature.value = temp
}

onMounted(()=>{
    getCitys()
})

</script>

<style lang="scss" scoped>
@import '//at.alicdn.com/t/c/font_4920805_tcw53t8fykm.css';

header {
  width: 100%;
  height: 80px;
  background: rgb(0, 102, 138);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  padding: 0 160px;
  nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    height: 100%;
    margin: 0 auto;
    padding: 0 80px;
    .left{
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        i{
            font-size: 24px;
        }
        .local{
            display: flex;
            gap: 20px;
        }
    }
    .right{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        font-size: 24px;
        color: #fff;
        .iconfont{
            font-size: 24px;
            transition: all 0.5s;
            cursor: pointer;
            &:hover{
                color: rgb(0, 78, 113);
            }
            &.opacity{
                opacity: 0;
            }
        }
    }
  }
}
</style>
